@charset "utf-8";

@import "common/reset";
@import "common/common";

* {
    margin: 0;
}

@function r($px) {
    @return $px/50*1rem;
}

body,
html {
    height: 100%;
}

.web {
    display: none;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    .space {
        list-style: none;
        width: 100%;
        height: 100%;
        position: absolute;
        top: -200%;
        left: 0;
        transition: all 3s linear;
        .sky {
            width: 100%;
            height: 100%;

            background-image: url("../img/bg1.png");
        }
        .start_space {
            height: 100%;
            width: 100%;
             background-image: url("../img/earth.png");
        }
    }
    .rock {
        position: absolute;
        max-width: 12%;
    }
    .score {
        position: absolute;
        max-width: 25%;
        transition: all 4s linear;
    }
    .plane {
        position: fixed;
        bottom: 15%;
        left: 50%;
        transform: translateX(-50%);
        transition: left .2s ease-in-out;
        width: 12%;
        img {
            width: 100%;
        }
    }
}

.mask{
    z-index: 100;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0;
    .mask_close{
        position: absolute;
        width: 35.78125%;
        height: 6.42605%;
        top: 75%;
        left: 32%;
    }
}

.btn_left,.btn_right{
    z-index: 100;
    position: absolute;
    width: 35.78125%;
    height: 6.42605%;
    bottom: 4.84154%;
}
.btn_left{
    left: 11.875%;
}
.btn_right{
    right: 11.875%;
}